{% extends "common/base.html" %}
{% block title %}
    首页
{% endblock %}
{% block main %}
	<div class="navbar_con">
		<div class="navbar">
			<h1 class="fl">商品分类</h1>
			 <ul class="sub_menu">
                {% for group in categories.values() %}
                <li>
                    <div class="level1">
                        {% for channel in group.channels %}
                        <a href="{{ channel.url }}">{{ channel.name }}</a>
                        {% endfor %}
                    </div>
                    <div class="level2">
                        {% for cat2 in group.sub_cats %}
                        <div class="list_group">
                            <div class="group_name fl">{{ cat2.name }} &gt;</div>
                            <div class="group_detail fl">
                                {% for cat3 in cat2.sub_cats %}
                                <a href="/list/{{ cat3.id }}/1/">{{ cat3.name }}</a>
                                {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </li>
                {% endfor %}
            </ul>
			<ul class="navlist fl">
				<li><a href="">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">真划算</a></li>
				<li class="interval">|</li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>
	<div class="pos_center_con clearfix">
		<ul class="slide">
            {% for content in contents.index_lbt %}
                <li><a href="{{ content.url }}"><img src="/static/images/goods/{{ content.image }}.jpg" alt="幻灯片01"></a>
                </li>
            {% endfor %}
        </ul>
		<div class="prev"></div>
		<div class="next"></div>
		<ul class="points"></ul>
		<div class="news">
			<div class="news_title">
				<h3>快讯</h3>
				<a href="#">更多 &gt;</a>
			</div>
			<ul class="news_list">
				 {% for content in contents.index_kx %}
                <li><a href="{{ content.url }}">{{ content.title }}</a></li>
                {% endfor %}
			</ul>
			{% for content in contents.index_ytgg %}
            <a href="{{ content.url }}" class="advs"><img src="/static/images/goods/{{ content.image }}.jpg"></a>
            {% endfor %}
		</div>
	</div>
    <div class="floor_adv" v-cloak>
        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model01">1F 手机通讯</h3>
                <div class="subtitle fr">
                    <a @mouseenter="f1_tab=1" :class="f1_tab===1?'active':''">时尚新品</a>
                    <a @mouseenter="f1_tab=2" :class="f1_tab===2?'active':''">畅想低价</a>
                    <a @mouseenter="f1_tab=3" :class="f1_tab===3?'active':''">手机配件</a>
                </div>
            </div>
            <div class="goods_con clearfix">
                <div class="goods_banner fl">
                    <img src="/static/images/banner01.jpg">
                    <div class="channel">
                       {% for content in contents.index_1f_pd %}
                        <a href="{{ content.url }}">{{ content.title }}</a>
                        {% endfor %}
                    </div>
                    <div class="key_words">
                         {% for content in contents.index_1f_bq %}
                        <a href="{{ content.url }}">{{ content.title }}</a>
                        {% endfor %}
                    </div>
                </div>
                <div class="goods_list_con">
                    <ul v-show="f1_tab===1" class="goods_list fl">
                        {% for content in contents.index_1f_ssxp %}
                        <li>
                            <a href="{{ content.url }}" class="goods_pic"><img
                                    src="/static/images/goods/{{ content.image }}.jpg"></a>
                            <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                            <div class="price">{{ content.text }}</div>
                        </li>
                        {% endfor %}
                    </ul>
                    <ul v-show="f1_tab===2" class="goods_list fl">
                        {% for content in contents.index_1f_cxdj %}
                        <li>
                            <a href="{{ content.url }}" class="goods_pic"><img
                                    src="/static/images/goods/{{ content.image  }}.jpg"></a>
                            <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                            <div class="price">{{ content.text }}</div>
                        </li>
                        {% endfor %}
                    </ul>
                    <ul v-show="f1_tab===3" class="goods_list fl">
                        {% for content in contents.index_1f_sjpj %}
                        <li>
                            <a href="{{ content.url }}" class="goods_pic"><img
                                    src="/static/images/goods/{{ content.image }}.jpg"></a>
                            <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                            <div class="price">{{ content.text }}</div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        <div class="list_model model02">
            <div class="list_title clearfix">
                <h3 class="fl" id="model01">2F 电脑数码</h3>
                <div class="subtitle fr">
                    <a @mouseenter="f2_tab=1" :class="f2_tab===1?'active':''">加价换购</a>
                    <a @mouseenter="f2_tab=2" :class="f2_tab===2?'active':''">畅享低价</a>
                </div>
            </div>
            <div class="goods_con clearfix">
                <div class="goods_banner fl">
                    <img src="/static/images/goods/{{ contents.index_2f_logo.0.image}}.jpg">
                    <div class="channel">
                        {% for content in contents.index_2f_pd %}
                        <a href="{{ content.url }}">{{ content.title }}</a>
                        {% endfor %}
                    </div>
                    <div class="key_words">
                        {% for content in contents.index_2f_bq %}
                        <a href="{{ content.url }}">{{ content.title }}</a>
                        {% endfor %}
                    </div>
                </div>
                <div class="goods_list_con">
                    <ul v-show="f2_tab===1" class="goods_list fl">
                      {% for content in contents.index_2f_cxdj %}
                        <li>
                            <a href="{{ content.url }}" class="goods_pic">
                                <img src="/static/images/goods/{{ content.image }}.jpg"></a>
                            <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                            <div class="price">{{ content.text }}</div>
                        </li>
                        {% endfor %}

                    </ul>
                    <ul v-show="f2_tab===2" class="goods_list fl">
                        {% for content in contents.index_2f_jjhg %}
                        <li>
                            <a href="{{ content.url }}" class="goods_pic"><img
                                    src="/static/images/goods/{{ content.image }}.jpg"></a>
                            <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                            <div class="price">{{ content.text }}</div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        <div class="list_model model03">
            <div class="list_title clearfix">
                <h3 class="fl" id="model01">3F 家居家装</h3>
                <div class="subtitle fr">
                    <a @mouseenter="f3_tab=1" :class="f3_tab===1?'active':''">生活用品</a>
                    <a @mouseenter="f3_tab=2" :class="f3_tab===2?'active':''">厨房用品</a>
                </div>
            </div>
            <div class="goods_con clearfix">
                <div class="goods_banner fl">
                     <img src="/static/images/goods/{{ contents.index_3f_logo.0.image }}.jpg">
                    <div class="channel">
                       {% for content in contents.index_3f_pd %}
                        <a href="{{ content.url }}">{{ content.title }}</a>
                        {% endfor %}
                    </div>
                    <div class="key_words">
                        {% for content in contents.index_3f_bq %}
                        <a href="{{ content.url }}">{{ content.title }}</a>
                        {% endfor %}
                    </div>
                </div>
                <div class="goods_list_con">
                    <ul v-show="f3_tab===1" class="goods_list fl">
                        {% for content in contents.index_3f_shyp %}
                        <li>
                            <a href="{{ content.url }}" class="goods_pic"><img
                                    src="/static/images/goods/{{ content.image }}.jpg"></a>
                            <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                            <div class="price">{{ content.text }}</div>
                        </li>
                        {% endfor %}
                    </ul>
                    <ul v-show="f3_tab===2" class="goods_list fl">
                         {% for content in contents.index_3f_cfyp %}
                        <li>
                            <a href="{{ content.url }}" class="goods_pic"><img
                                    src="/static/images/goods/{{ content.image }}.jpg"></a>
                            <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                            <div class="price">{{ content.text }}</div>
                        </li>
                        {% endfor %}

                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
